<template>
  <div
    :class="[
      multipage === true ? 'multi-page' : 'single-page',
      'not-menu-page',
      'home-page',
    ]"
  >
    <a-row :gutter="8" class="head-info">
      <a-card class="head-info-card">
        <a-col :span="12">
          <div class="head-info-avatar">
            <img alt="头像" :src="avatar" />
          </div>
          <div class="head-info-count">
            <div class="head-info-welcome">
              {{ welcomeMessage }}
            </div>
            <div class="head-info-desc">
              <p>
                {{ user.deptName ? user.deptName : "暂无部门" }} |
                {{ user.roleName ? user.roleName : "暂无角色" }}
              </p>
            </div>
            <div class="head-info-time">
              上次登录时间：{{
                user.lastLoginDate ? user.lastLoginDate : "第一次访问系统"
              }}
            </div>
          </div>
        </a-col>
      </a-card>
    </a-row>
    <a-row :gutter="8" class="head-info"><quick-menu /></a-row>
    <a-row :gutter="8" class="head-info"><trade-data /></a-row>
    <a-row  type="flex" :gutter="8" class="head-info">
      <a-col :span="16"><trade-echarts /> </a-col>
      <a-col :span="8"><wait-check /> </a-col>
    </a-row>
<!--    <a-row :gutter="8" class="head-info"
      ><apply-list :username="this.user.username" @applyOk="handleApplyOk"
    /></a-row>
    <a-row :gutter="8" class="head-info"
      ><FlowProcess ref="FlowProcess" :username="this.user.username"
    /></a-row>-->
  </div>
</template>
<script>
import HeadInfo from "@/views/common/HeadInfo";
import { mapState } from "vuex";
import UserInfoHome from "@/views/system/user/UserInfoHome";
import QuickMenu from "@/views/index/QuickMenu";
import TradeData from "@/views/index/TradeData";
import TradeEcharts from "@/views/index/TradeEcharts";
import WaitCheck from "@/views/index/WaitCheck";
import ApplyList from "@/views/index/ApplyList";
import FlowProcess from "@/views/index/FlowProcess";
import DashBoard from './workflow/index/DashBoard';

import moment from "moment";
moment.locale("zh-cn");

export default {
  name: "HomePage",
  components: {
    HeadInfo,
    UserInfoHome,
    QuickMenu,
    ApplyList,
    TradeData,
    TradeEcharts,
    FlowProcess,
    WaitCheck,
    DashBoard
  },
  data() {
    return {
      series: [],
      chartOptions: {
        chart: {
          toolbar: {
            show: false,
          },
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "35%",
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          show: true,
          width: 2,
          colors: ["transparent"],
        },
        xaxis: {
          categories: [],
        },
        fill: {
          opacity: 1,
        },
      },
      todayIp: "",
      todayVisitCount: "",
      totalVisitCount: "",
      userRole: "",
      userDept: "",
      lastLoginTime: "",
      welcomeMessage: "",
    };
  },
  computed: {
    ...mapState({
      multipage: (state) => state.setting.multipage,
      user: (state) => state.account.user,
    }),
    avatar() {
      return `static/avatar/${this.user.userImagePath}`;
    },
  },
  methods: {
    welcome() {
      const date = new Date();
      const hour = date.getHours();
      let time =
        hour < 6
          ? "早上好"
          : hour <= 11
          ? "上午好"
          : hour <= 13
          ? "中午好"
          : hour <= 18
          ? "下午好"
          : "晚上好";
      let welcomeArr = [
        "喝杯咖啡休息下吧☕",
        "要不要和朋友打局LOL",
        "要不要和朋友打局王者荣耀",
        "几天没见又更好看了呢😍",
        "今天又写了几个Bug🐞呢",
        "今天在群里吹水了吗",
        "今天吃了什么好吃的呢",
        "今天您微笑了吗😊",
        "今天帮助别人解决问题了吗",
        "准备吃些什么呢",
        "周末要不要去看电影？",
      ];
      let index = Math.floor(Math.random() * welcomeArr.length);
      return `${time}，${this.user.nickName}（${this.user.loginId}），${welcomeArr[index]}`;
    },
    handleApplyOk() {
      this.$refs.FlowProcess.refreshList();
    },
  },
  mounted() {
    this.welcomeMessage = this.welcome();
  },
};
</script>
<style lang="less">
.home-page {
  .head-info {
    margin-bottom: 0.5rem;
    .head-info-card {
      padding: 0.5rem;
      border-color: #f1f1f1;
      .head-info-avatar {
        display: inline-block;
        float: left;
        margin-right: 1rem;
        img {
          width: 5rem;
          border-radius: 2px;
        }
      }
      .head-info-count {
        display: inline-block;
        float: left;
        .head-info-welcome {
          font-size: 1.05rem;
          margin-bottom: 0.1rem;
        }
        .head-info-desc {
          color: rgba(0, 0, 0, 0.45);
          font-size: 0.8rem;
          padding: 0.2rem 0;
          p {
            margin-bottom: 0;
          }
        }
        .head-info-time {
          color: rgba(0, 0, 0, 0.45);
          font-size: 0.8rem;
          padding: 0.2rem 0;
        }
      }
    }
  }
  .count-info {
    .visit-count-wrapper {
      padding-left: 0 !important;
      .visit-count {
        padding: 0.5rem;
        border-color: #f1f1f1;
        .ant-card-body {
          padding: 0.5rem 1rem !important;
        }
      }
    }
    .project-wrapper {
      padding-right: 0 !important;
      .project-card {
        border: none !important;
        .ant-card-head {
          border-left: 1px solid #f1f1f1 !important;
          border-top: 1px solid #f1f1f1 !important;
          border-right: 1px solid #f1f1f1 !important;
        }
        .ant-card-body {
          padding: 0 !important;
          table {
            width: 100%;
            td {
              width: 50%;
              border: 1px solid #f1f1f1;
              padding: 0.6rem;
              .project-avatar-wrapper {
                display: inline-block;
                float: left;
                margin-right: 0.7rem;
                .project-avatar {
                  color: #42b983;
                  background-color: #d6f8b8;
                }
              }
            }
          }
        }
        .project-detail {
          display: inline-block;
          float: left;
          text-align: left;
          width: 78%;
          .project-name {
            font-size: 0.9rem;
            margin-top: -2px;
            font-weight: 600;
          }
          .project-desc {
            color: rgba(0, 0, 0, 0.45);
            p {
              margin-bottom: 0;
              font-size: 0.6rem;
              white-space: normal;
            }
          }
        }
      }
    }
  }
}
</style>
